<!-- @author: Fengli -->
<!-- @date: 5/2/19 -->
<!-- @desc:  显示周日志信息-->
<template>
<div>
  <!-- 周选择 -->
  <el-row>
    <el-col :span="24">
      <el-date-picker
        v-model="week"
        type="week"
        placeholder="选择周"
        format="yyyy 第 WW 周"
        align="center"
        @change="getWeekSummary"
        size = "large">
      </el-date-picker>
    </el-col>
  </el-row>

  <!-- 分割线 -->
  <md-divider class="md-inset"></md-divider>
  <!-- todo 周数据展示。某天、任务量、已完成任务量、未完成任务量、工作时间（realEndTime） -->
  <GChart
    :settings="{packages: ['bar']}"
    :data="weekData"
    :options="chartOptions"
    :createChart="(el, google) => new google.charts.Bar(el)"
    type="BarChart"
    @ready="onChartReady"
  />
  <!-- 分割线 -->
  <md-divider class="md-inset"></md-divider>
  <!--  编写周日志部分 -->
  <md-field>
    <label>周总结</label>
    <md-textarea v-model="weekSummary.content"></md-textarea>
    <md-button class="md-icon-button md-raised" @click="saveWeekSummary">
      <md-icon>save</md-icon>
    </md-button>
  </md-field>
  <!-- 提示框-->
  <Message ref="mes"></Message>
</div>
</template>

<script>
  import { GChart } from 'vue-google-charts'
  import {getWeekData} from '@/util/service/JournalService'
  import {addWeekSummary, queryWeekSummary, updateWeekSummary} from '@/util/service/WeekSummaryService'
  import Message from '@/components/Message'
  import axios from 'axios/index'

  export default {
    name: 'Week',
    components: {
      GChart, Message
    },
    data: () => ({
      week: new Date(),
      chartsLib: null, // 这个chartlib可能来自google或者echart等
      // Array will be automatically processed with visualization.arrayToDataTable function
      weekSummary: {
        id: null,
        year: null,
        n: null,
        content: null
      },
      chartRows: [],
      chartHeader: ['某天', '任务量', '已完成任务量', '未完成任务量'],
      chartData: [
        ['某天', '任务量', '已完成任务量', '未完成任务量'],
        ['2019/5/5', 0, 0, 0],
        ['2019/5/6', 0, 0, 0],
        ['2019/5/7', 0, 0, 0],
        ['2019/5/8', 0, 0, 0],
        ['2019/5/9', 0, 0, 0],
        ['2019/5/10', 0, 0, 0],
        ['2019/5/11', 0, 0, 0]
      ]
    }),
    computed: {
      chartOptions () {
        if (!this.chartsLib) return null
        return this.chartsLib.charts.Bar.convertOptions({
          chart: {
            title: '周信息',
            subtitle: '任务量、未完成任务量、工作时间:' /* + this.chartData[1][0] + '到' + this.chartData[7][0] */
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          hAxis: { format: 'decimal' },
          height: 400,
          colors: ['#1b9e77', '#d95f02', '#7570b3', '#7DB30D']
        })
      },
      weekData () {
        return [this.chartHeader, ...this.chartRows]
      }
    },
    methods: {
      onChartReady (chart, google) {
        this.chartsLib = google
      },
      saveWeekSummary () {
        //  保存weekSummary
        if (this.weekSummary.id !== null && this.weekSummary.id !== undefined) {
          // 更新
          updateWeekSummary(this.weekSummary).then((response) => {
            this.$refs.mes.message({content: '更新周总结成功', position: 'center', showMsg: true})
            // 后台同步
            let token = JSON.parse(localStorage.getItem('token'))
            axios({
              data: response,
              method: 'post',
              url: this.GLOBAL.prefix + '/updateWeekSummary',
              headers: {
                Authorization: token.token_type + ' ' + token.access_token
              }
            }).catch((error) => {
              throw error
            })
          })
        } else {
          // 添加
          addWeekSummary(this.week, this.weekSummary.content).then((response) => {
            this.$refs.mes.message({content: '添加周总结成功', position: 'center', showMsg: true})
            // 后台同步
            let token = JSON.parse(localStorage.getItem('token'))
            axios({
              data: response,
              method: 'post',
              url: this.GLOBAL.prefix + '/addWeekSummary',
              headers: {
                Authorization: token.token_type + ' ' + token.access_token
              }
            }).catch((error) => {
              throw error
            })
          }).catch((error) => {
            this.$refs.mes.message({content: '由于异常原因，添加周总结失败', position: 'center', showMsg: true})
            throw error
          })
          // 获取周总结
          queryWeekSummary(this.week).then((response) => {
            this.weekSummary = response
          }).catch((error) => {
            this.$refs.mes.message({content: '由于异常原因，获取周总结失败', position: 'center', showMsg: true})
            throw error
          })
        }
      },
      getWeekSummary () {
        // 获取周总结
        queryWeekSummary(this.week).then((response) => {
          if (response !== null && response !== undefined) {
            this.weekSummary = response
          } else {
            this.weekSummary.content = ''
          }
        }).catch((error) => {
          this.$refs.mes.message({content: '由于异常原因，获取周总结失败', position: 'center', showMsg: true})
          throw error
        })
        // 获取周信息,主要就是获取charData ['某天', '任务量', '已完成任务量', '未完成任务量', '实际工作时间']
        // 然而返回的data ['某天', '任务量', '已完成任务量', '已完成的任务列表'],并且任务量', '已完成任务量', '已完成的任务列表'都是promise
        getWeekData(this.week).then((response) => {
          this.chartRows = response
        })
      }
    },
    mounted () {
      this.getWeekSummary()
    },
    created () {
    }
  }
</script>

<style lang="less" scoped>
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 100%;
  }
</style>

